<template>
  <div class="banner-add">

    <div class="createPost-main-container">
      <el-form ref="form" label-width="150px" :model="form">

        <el-form-item label="产品缩略图宽度">
          <el-input v-model="form.width" type="number" />
        </el-form-item>

        <el-form-item label="产品缩略图高度">
          <el-input v-model="form.height" type="number" />
        </el-form-item>

        <el-form-item label="手机产品缩略图宽度">
          <el-input v-model="form.phoneWidth" type="number" />
        </el-form-item>

        <el-form-item label="手机产品缩略图高度">
          <el-input v-model="form.phoneHeight" type="number" />
        </el-form-item>

      </el-form>
    </div>

    <sticky :class-name="'cms-sub-navbar '+ajaxStatus">
      <el-button :loading="ajaxStatus" style="margin-left: 10px;" type="success" @click="submitForm">
        发布
      </el-button>
    </sticky>

  </div>
</template>

<script>
import { postData, getEditData } from '@/api/product/other'
import Sticky from 'components/Sticky'

const defaultForm = {
  id: '',
  width: '',
  height: '',
  phoneWidth: '',
  phoneHeight: '',
  status: 0
}

export default {
  components: { Sticky },
  props: {},
  data() {
    return {
      ajaxStatus: false,
      form: Object.assign({}, defaultForm)
    }
  },
  computed: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取编辑数据
    fetchData() {
      getEditData().then(re => {
        const { data } = re
        this.form = data
      })
    },

    /**
     * 保存、发布接口
     *
     * id：保存为空，编辑传列表id
     */
    submitForm() {
      postData(this.form)
        .then(re => {
          this.ajaxStatus = false
          this.$notify({
            name: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        })
        .catch(() => {
          this.ajaxStatus = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.href-remark{
  color: #5e6d82;
  .red {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
}
.logo-card{
  margin-bottom: 10px;
}
</style>

